<template>
	<div>
		<el-col :span="24">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>关键词设置</span>
					<el-button @click="dialogVisible = true" style="float: right; padding: 3px 0" type="text">添加关键词</el-button>
				</div>
				<div class="">
					关键词：{{keyword}}
				</div>
			</el-card>
		</el-col>
		<!--添加关键词对话框-->
		<el-dialog title="添加关键词" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>关键词：</span>
			<el-input v-model="addKeyWord" placeholder="请输入关键词"></el-input>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitKeyWord">确 定</el-button>
  			</span>
		</el-dialog>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'
	export default {
		data() {
			return {
				keyword: '',
				addKeyWord: '',
				dialogVisible: false
			};
		},
		created() {
			_g.closeGlobalLoading()
			this.init()

		},
		methods: {

			init() {
				// 基本数据获取
				this.tableData()
			},
			tableData() {
				let data = {}
				// 请求地址
				let url = '/AdminApi/SystemSetting/keyList'
				this.apiPost(url, data).then(res => {
					console.log('关键词res', res)
					this.handelResponse(res, data => {
						this.keyword = data
						_g.closeGlobalLoading()
					})
				})
			},
			submitKeyWord() {
				let data = {
					key_word: this.addKeyWord
				}
				// 请求地址
				let url = '/AdminApi/SystemSetting/key_word'
				this.apiPost(url, data).then(res => {
					console.log('添加关键词res', res)
					this.handelResponse(res, data => {
						this.keyword.push(this.addKeyWord)
						_g.toastMsg('success', res.msg)
						this.dialogVisible = false
						_g.closeGlobalLoading()
					})
				})
			}
		},
		mixins: [http]
	}
</script>

<style scoped>
	.el-input,
	.el-input__inner {
		width: auto;
	}
</style>